<template>
  <div>
    <vue-json-editor
      v-model="config"
      :showBtns="false"
      :mode="'code'"
      lang="zh"
    />
    <el-button @click="saveConfig" type="primary" size="small" class="mg-top-20"
      >保存</el-button
    >
    <el-button @click="sendConfig" type="primary" size="small" class="mg-top-20"
      >下发</el-button
    >
  </div>
</template>

<script>
import vueJsonEditor from "vue-json-editor";
import {
  DeviceConfigGet,
  DeviceConfigSave,
  DeviceConfigSend,
} from "@/api/deviceApi.js";
export default {
  name: "deviceConfig",
  props: {
    deviceId: {
      type: String,
    },
  },
  components: {
    vueJsonEditor,
  },
  data() {
    return {
      config: "",
    };
  },
  mounted() {
    this.getConfig();
  },
  watch: {
    deviceId: function () {
      this.getConfig();
    },
  },
  methods: {
    getConfig: function () {
      DeviceConfigGet(this.deviceId).then((rst) => {
        this.config = JSON.parse(rst.config);
      });
    },
    saveConfig: function () {
      DeviceConfigSave(this.deviceId, {
        config: JSON.stringify(this.config),
      }).then(() => {
        this.$notify({
          title: "成功",
          message: "修改成功",
          type: "success",
        });
      });
    },
    sendConfig: function () {
      DeviceConfigSend(this.deviceId).then(() => {
        this.$notify({
          title: "成功",
          message: "下发成功",
          type: "success",
        });
      });
    },
  },
};
</script>
